<template>
	<view class="content">
		<view class="headertop" :style="{'background':flag1?'#000':''}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">
				<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 2@2x.png" class="pagelefticon"
					mode=""></image>
			</view>
		</view>
		<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(7).png" mode="" class="pageimg">
		</image>
		<view class="bottoncontent">
			<view class="center">
				<view class="" style="width: 100%;display: flex;align-items: center;margin-top: 28rpx;">
					<view class="seacherbox">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(11).png"
							class="sechicon" mode=""></image>
						<input type="text" placeholder="请输入关键词" v-model="query.keywords" placeholder-class="title_input"
							class="custom-input" />
						<image src="/static/微信图片_20250521183655.png" class="closeicon" @click="closeinput"
							v-if="query.keywords" mode=""></image>
						<view class="seachbtn" @click="initlist('搜索')">
							搜索
						</view>
					</view>
					<view style="width: 76rpx;height: 76rpx;margin-left: 26rpx;position: relative;">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11299@2x.png"
							@click="gopage('购物车')" class="reduce" mode=""></image>
						<view class="readuce" v-if="numgouwche">
							{{numgouwche}}
						</view>
					</view>


				</view>
				<scroll-view scroll-x="true" class="classify">
					<view class="itembox" @click="qiehuan1(-1)">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png"
							class="itemboxmengc" mode="aspectFill" :style="{'opacity':active==-1?'0.5':'1'}">
						</image>
						<image src="/static/Group 11441@2x.png" :class="active==-1?'itemboxback mohu':'itemboxback'"
							mode="aspectFill"></image>
						<view class="title">
							全部
						</view>
						<view class="activebox" v-if="active==-1">

						</view>
					</view>
					<view class="itembox" @click="qiehuan1(index)" v-for="(item,index) in classList" :key="item.id">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/image@2x(2).png"
							class="itemboxmengc" mode="aspectFill" :style="{'opacity':active==index?'0.5':'1'}">
						</image>
						<image :src="item.image" :class="active==index?'itemboxback mohu':'itemboxback'"
							mode="aspectFill"></image>
						<view class="title">
							{{item.name}}
						</view>
						<view class="activebox" v-if="active==index">

						</view>
					</view>
				</scroll-view>


				<view class="classifybox">
					<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Union@2x.png"
						class="classifybox_imgback" mode="">
					</image>
					<view class="" style="height: 24rpx;width: 100%;">

					</view>
					<view class="" style="width: 100%;display: flex;overflow: hidden;">
						<view class="leftmenu">
							<view :class="active1==-1?'menuItem active':'menuItem'" @click="qiehuan(-1)">
								<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 22346@2x.png"
									class="titleleftimg" mode="" v-if="active1==-1"></image>
								全部分类
							</view>
							<template v-if="active!=-1">
								<view :class="active1==index?'menuItem active':'menuItem'"
									v-for="(item,index) in classList[active]['son']" @click="qiehuan(index,item)"
									:key="index">
									<image
										src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 22346@2x.png"
										class="titleleftimg" mode="" v-if="active1==index"></image>
									{{item.name}}
								</view>
							</template>

							<view :class="active1==index?'menuItem active':'menuItem'" v-for="(item,index) in allson"
								@click="qiehuan(index,item)" :key="index" v-if="active==-1">
								<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Rectangle 22346@2x.png"
									class="titleleftimg" mode="" v-if="active1==index"></image>
								{{item.name}}
							</view>
						</view>
						<view class="rightcontent">
							<view class="title" v-if="active!=-1">
								{{active1==-1?'全部分类':classList[active]['son'][active1]['name']}}
							</view>
							<view class="title" v-if="active==-1">
								{{active1==-1?'全部分类': allson[active1]['name']}}
							</view>

							<view class="msgicon" v-if="!list.length">
								<image src="/static/微信图片_20250514232056.png" mode=""></image>
								<view class="msgtext">
									暂无商品
								</view>
							</view>

							<view class="itemcontent1" v-for="(item,index) in list" :key="index"
								@click="gopage('商品详情',item.id)">
								<image :src="item.image" mode=""></image>
								<view class="caipininfo">
									<view class="linetop">
										<view class="title">
											{{item.title}}
										</view>
										<image
											src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11214@2x.png"
											class="addicon" mode="" @click.stop="addcarfun('+',item)" v-if="!item.num">
										</image>
										<view class="gbnum" v-else>
											<image
												src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11215@2x.png"
												mode="" @click.stop="addcarfun('-',item)" class="icon"></image>
											<view class="num">
												{{item.num}}
											</view>
											<image
												src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Group 11214@2x.png"
												mode="" @click.stop="addcarfun('+',item)" class="icon"></image>
										</view>
									</view>
									<view class="fbt">
										剩余：{{item.stock}}份
									</view>
									<view class="jiageline">
										<view class="numtext">
											￥{{item.price}}<span style="color: #86909C;font-size: 22rpx;">/份</span>
										</view>
										<view class="huiyuanbox">
											<span
												style="color: #FFFFFF;font-size: 24rpx;">￥</span>{{item.userprice}}<span
												style="color: #FFFFFF;font-size: 20rpx;">会员价</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="" style="height: 300rpx;">

		</view>
		<Tabbar :page="page"></Tabbar>
		<userlogin ref="denglu" @updata="getuser"></userlogin>
	</view>
</template>

<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import Tabbar from '@/components/tabbar.vue'
	import {
		onShow,
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		classlist,
		goodslist,
		addcart,
		cartlist
	} from '@/api/commodity.js'
	const denglu = ref(null)
	const flag1 = ref(false)
	const page = ref('')
	const classList = ref([])
	const list = ref([])
	const lastpage = ref('')
	const active = ref(-1)
	const active1 = ref(-1)
	const numgouwche = ref(0)
	const active2 = ref(-1)
	const statusBarHeight = ref(0)
	const barHeight = ref('')
	const allson = ref([])
	const query = reactive({
		page: 1,
		limit: 10,
		keywords: '',
		cid: '',
		cidtwo: ''
	})
	onShow(() => {
		page.value = '/pages/commodity/index'
		initgouwunum()
	})
	onLoad(() => {
		classlistinit()
	})
	async function initgouwunum() {
		const res = await cartlist()
		if (res.data.code == 1) {
			console.log(res.data.data, list.value, 'arr.valuearr.valuearr.value');
			for (var i in list.value) {
				var ind = res.data.data.list.findIndex(item => item.gid == list.value[i]['id'])
				if (ind == -1) {
					list.value[i]['num'] = 0
				} else {
					list.value[i]['num'] = res.data.data.list[ind]['num']
				}
			}
			var arr1 = res.data.data.list
			var jiage = arr1.reduce((e, item) => {
				return e + item.num
			}, 0)
			console.log(jiage, 'jiage-----------------');
			numgouwche.value = jiage
		}
	}
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			flag1.value = true
		} else {
			flag1.value = false
		}
	})
	onMounted(() => {
		console.log('我创建了', uni.getSystemInfoSync().statusBarHeight, wx.getMenuButtonBoundingClientRect());
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	async function addcarfun(type, item) {
		var adtype1 = 1
		if (type == '+') {
			adtype1 = 1
		} else {
			adtype1 = 2
		}
		const res = await addcart({
			gid: item.id,
			num: 1,
			adtype: adtype1
		})
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
		if (res.data.code == 1) {
			initgouwunum()
		} else {
			uni.showToast({
				title: res.data.msg,
				icon: 'none'
			})
		}
	}

	function closeinput() {
		query.keywords = ''
		initlist('搜索')
	}

	function qiehuan(index, item) {

		// for (var i in classList.value) {
		// 	for (var ii in classList.value[i]['son']) {
		// 		if (classList.value[i]['son'][ii]['id'] == item.id) {
		// 			console.log(i, 'i i i i i ');
		// 			active.value = i
		// 		}
		// 	}
		// }

		active1.value = index
		list.value = []
		query.page = 1
		initlist()
	}

	function qiehuan1(index) {
		if (index != -1) {
			query.keywords = ''
		}
		active.value = index
		list.value = []
		query.page = 1
		initlist()
	}
	// 类型列表
	async function classlistinit() {
		const res = await classlist()
		if (res.data.code == 1) {
			classList.value = res.data.data
			var arr = []
			for (var i in classList.value) {
				arr.push(...classList.value[i]['son'])
			}
			allson.value = arr
			console.log(allson.value, 'allsonallsonallsonallsonallsonallsonallson');
			initlist()
		}
	}
	// 商品列表
	async function initlist(str) {
		if (str == '搜索') {
			active.value = -1
			active1.value = -1
			query.page = 1
			list.value = []
		}
		if (active.value != -1) {
			query.cid = classList.value[active.value]['id']
		} else {
			query.cid = ''
		}
		if (active1.value != -1) {
			if (active.value != -1) {
				query.cidtwo = classList.value[active.value]['son'][active1.value]['id']
			} else {
				query.cidtwo = allson.value[active1.value]['id']
			}
		} else {
			query.cidtwo = ''
		}


		const res = await goodslist(query)
		if (res.data.code == 1) {
			lastpage.value = res.data.data.lastpage
			list.value.push(...res.data.data.list)
			initgouwunum()
		}
	}

	function gopage(str, id) {
		if (str == '购物车') {
			if (!uni.getStorageSync('token')) {
				console.log(123123, denglu.value, 'denglu.valuedenglu.valuedenglu.value');
				denglu.value.DengLu()
				return
			}
			uni.navigateTo({
				url: '/sub_commodity/commodity/gouwuche'
			})
			return
		} else if (str == '商品详情') {
			uni.navigateTo({
				url: '/sub_commodity/commodity/detail?id=' + id
			})
		}

	}
</script>

<style lang="scss">
	.closeicon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.gbnum {
		display: flex;
		align-items: center;
		width: 146rpx;
		justify-content: space-between;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #4E5969;
		z-index: 999;

		.icon {
			width: 40rpx !important;
			height: 40rpx !important;
			margin-left: 0rpx !important;
			border-radius: 0rpx !important;
		}
	}

	.msgicon {
		width: 400rpx;
		margin: 30rpx auto;
		overflow: hidden;

		.msgtext {
			width: 400rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #4E5969;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	@import '@/styles/commodity.scss';
</style>